<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left"></div>
      <div class="header_right">
        <el-button
          size="small"
          style="margin-left: 15px"
          icon="el-icon-plus"
          @click="onAdd"
          >新增</el-button
        >
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        height="calc(100% - 65px)"
        :header-cell-style="headerStyle"
        class="el-table table el-table--fit el-table--scrollable-y el-table--enable-row-hover el-table--enable-row-transition"
      >
        <el-table-column align="center" label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="model"
          label="产品型号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="accessId"
          label="产品ID"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="accessKey"
          label="产品密钥"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="network"
          label="联网方式"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="isAlarm"
          label="子设备"
          min-width="90"
        >
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.isParent === 0"
              >否</el-tag
            >
            <el-tag
              type="warning"
              size="mini"
              v-else-if="scope.row.isParent === 1"
              >是</el-tag
            >
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="manufacturerName"
          label="厂商名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="description"
          label="产品型号描述"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="management"
          label="操作"
          width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <i
                @click="onEdit(scope.row)"
                class="iconfont tianxie tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <i
                @click="onDel(scope.row.id)"
                class="iconfont shanchu tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @pagination="ProductModelPage"
        class="pagination"
      >
      </pagination>
    </div>
    <addProductType
      ref="refaddProductType"
      :productId="$route.params.dictId"
    ></addProductType>
    <editProductType
      ref="refeditProductType"
      :editInfo="editInfo"
    ></editProductType>
  </div>
</template>

<script>
import addProductType from "./components/addProductType.vue";
import editProductType from "./components/editProductType.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqProductModelRemove, reqProductModelPage } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "productType",
  components: {
    Pagination,
    addProductType,
    editProductType,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      editInfo: {},
      model: "",
    };
  },
  mounted() {},
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 新增
    onAdd() {
      this.$refs.refaddProductType.dialogVisible = true;
      this.$refs.refaddProductType.getManufacturerList();
    },
    onEdit(row) {
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refeditProductType.dialogVisible = true;
    },
    async onDel(id) {
      const result = await this.$confirm(
        "此操作将永久删除该产品型号, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      let res = await reqProductModelRemove(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除产品型号成功");
      this.ProductModelPage();
    },
    async ProductModelPage() {
      let res = await reqProductModelPage(this.page, this.limit, {
        productId: this.dictId,
        model: this.model,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
  },
  created() {
    this.dictId = this.$route.params && this.$route.params.dictId;
    // console.log(dictId);
    // console.log(this.$route.params);
    this.ProductModelPage();
  },
  activated() {},
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
</style>